<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>园区方向功能对比</title>
  <script src="./echarts.js"></script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    const d = `geovis	LT	NY	TY	AY	easy	module
5	5	2	4	4	18.10215881	基础信息管理
4	4	2	3	5	17.63000094	安全体系管理
4	4	3	4	4	27.59912034	园区规划管理
4	4	2	4	4	17.85575708	禁限控目录
4	4	2	4	4	27.47946908	企业基本信息管理
3	4	3	4	4	29.07608446	值班值守
4	4	3	4	3	19.07878203	MSDS（化学品安全技术说明书）数据库
0	4	3	4	4	50	大数据中台
2	5	3	3	2	30.68627073	执法管理系统+APP
4	4	3	3	5	25.5937504	第三方单位管理
4	4	3	0	5	13.57449842	企业事故事件
4	4	2	5	4	15.27886826	从业人员管理
4	5	2	3	3	17.38299243	两重点一重大
2	4	2	4	3	10.5738666	安全培训管理
4	4	3	4	4	21.60455985	包保责任管理
2	4	3	4	4	25.08822775	在线监测预警
3	5	3	4	4	22.56655829	重大风险评估与监控
4	4	3	4	4	13.20504472	危险源隐患管理
2	4	3	4	4	17.66574131	企业分类监管
1	4	4	3	4	50.325	视频引接管理平台
4	4	4	3	4	23.59515093	风险对象管理
3	3	4	3	4	19.23947787	风险单元分析
3	4	4	4	4	10.57425993	隐患排查治理
3	2	3	2	4	27.47131201	双重预防抽查
2	5	4	3	3	10.02082827	事故后果评估
0	5	4	3	0	21.78972647	智能巡检系统
5	4	3	2	5	28.63230982	八大作业管理
2	3	3	2	3	19.15932889	作业过程监督
2	3	3	2	4	28.24826622	违规报警
2	4	4	3	4	22.20926714	人员/车辆定位
2	4	3	3	4	15.12804779	车辆路径规划
2	4	4	3	4	15.54785778	出入口管理（APP/小程序）
2	4	3	3	3	15.77764131	停车场管理
2	4	3	2	4	16.55400554	电子围栏管理
3	4	3	4	3	18.25359145	应急指挥
4	4	3	4	3	19.31757687	应急演练
4	4	3	4	3	21.14867002	预案
3	4	3	4	4	16.20887941	资源
2	4	3	3	2	13.85168917	知识库
5	2	5	2	2	100	可视化效果
5	0	0	0	0	90	空间分析
5	0	0	0	0	90	行业分析
3	1	0	2	2	80	机理模型
5	2	5	2	2	80	仿真
5	2	5	2	2	80	特效
5	0	0	0	0	80	低代码开发`
const legend = ["中科星图",	"零碳数智",	"鼐云", "南京太严", "安远科技"]
function rrr(v) {
  if (v === 5) {
    return 100 - Math.random() * 5
  }
  if (v === 0) {
    return 0;
  }
  return (-10 + Math.random() * 20) + v * 20
}
function getSeries(data, name, color) {
  return {
    type: 'scatter',
    symbolSize: 10,
    name,
    data,
    label: {
      show: false,
      position: 'bottom',
      formatter: function (item) {
        return item.value[2]
      }
    },
    itemStyle: {
      borderColor: color,
      borderWidth: 2,
      shadowColor: color,
      shadowBlur: 8
    },
    // 中心点交集象限轴
    markLine: {
      silent: true, // 是否不响应鼠标事件
      symbol: ['none', 'none'], // 设置平均线首段无点末端无箭头
      precision: 2, // 精度
      lineStyle: {
        type: 'solid',
        color: '#666666'
      },
      label: {
        color: '#666666',
        position: 'end',
        formatter: '{b}'
      },
      data:
        [{
          "name": "实现难度",
          "xAxis": "50"
        }, {
          "name": "实现度",
          "yAxis": "50"
        }]
    }
  }
}
const colors = ['#378eff', '#31eb8b', '#ffb300', '#ff4646',  '#00DB1C']
function f(i) {
  const b = d.split(/\n/);
  const c = b.map(d => d.split(/\s/));
  const result = [];
  for (let i of c) {
    result.push([rrr(+i[0]), rrr(+i[1]), rrr(+i[2]), rrr(+i[3]), rrr(+i[4]), +i[5], i[6]])
  }
  const name = legend[i];
  const data = result.map(e => [e[i], e[5], e[6]])
  const color = colors[i];
  return getSeries(data, name, color)
}
    var
      option = {
        legend: {
          show: true,
          top: 20,
          itemGap: 30, // 垂直间距
          y: 'top', // 延Y轴居中
          data: legend,
        },
        tooltip: {
          // trigger: 'axis',
          showDelay: 0,
          // backgroundColor: "rgba(255,255,255,0.95)", //通过设置rgba调节背景颜色与透明度
          backgroundColor: "rgba(0,0,0,0.6)",
          color: "#666666",
          textStyle: {
            color: "#666666",
            fontSize: 12
          },
          padding: [5, 10],
          extraCssText: "box-shadow:0 2px 4px rgba(91,121,251,0.3);",
          formatter: function (params) {
            var table = "";
            const t = legend[params.componentIndex]
            if (params.value.length >= 3) {
              table = "<table><tr><td style='color:#FFFFFF;'>" + t + "-" + params.data[2] + "</td></tr>";
              table += "<tr>";
              table += "<td><span style='color:#FFFFFF;'>实现程度</span></td>";
              table += "<td><span style='color:#FFFFFF;font-size: 14px;font-family: Roboto-Medium;margin-left: 12px;'>" + params.data[0] + "</span></td>";
              table += "</tr>";
              table += "<tr>";
              table += "<td><span style='color:#FFFFFF;'>实现难度</span></td>";
              table += "<td><span style='color:#FFFFFF;font-size: 14px;font-family: Roboto-Medium;margin-left: 12px;'>" + params.data[1] + "</span></td>";
              table += "</tr>";
              table += "</table>";
            } else {
              table = params.seriesName + ' <br>' + params.name + '   ' + params.value + '% ';
            }
            return table;
          },
          axisPointer: {
            show: true,
            type: "line",
            lineStyle: {
              type: "dashed",
              width: 1
            }
          }
        },
        grid: {
          left: '80',
          right: '80',
          bottom: '10',
          top: '100',
          containLabel: true
        },
        graphic: [
          {
            type: "text",
            z: 100,
            left: "20",
            top: "20",
            style: {
              fill: "#296BEF",
              textAlign: "right",
              text: ["实现度低", "实现难度大"].join("\n"),
              font: "14px Microsoft YaHei"
            }
          },
          {
            type: "text",
            z: 100,
            right: "20",
            top: "20",
            style: {
              fill: "#296BEF",
              text: ["实现度高", "实现难度大"].join("\n"),
              font: "14px Microsoft YaHei"
            }
          },
          {
            type: "text",
            z: 100,
            right: "20",
            bottom: "20",
            style: {
              fill: "#296BEF",
              text: ["实现度高", "实现难度低"].join("\n"),
              font: "14px Microsoft YaHei"
            }
          },
          {
            type: "text",
            z: 100,
            left: "20",
            bottom: "20",
            style: {
              fill: "#296BEF",
              textAlign: "right",
              text: ["实现度低", "实现难度低"].join("\n"),
              font: "14px Microsoft YaHei"
            }
          }
        ], //4个角的文字 + 上，右侧全国数据
        "xAxis": {
          "show": false,
          // 此处需要加 max和min 属性实现坐标轴时刻居中显示
          "axisLine": {
            "lineStyle": {
              "color": "#ddd"
            }
          },
          "axisLabel": {
            "color": "#666"
          },
          "splitLine": {
            "show": false,
            "lineStyle": {
              "color": "#eee"
            }
          },
          "splitArea": {
            "show": false
          }
        },
        "yAxis": {
          "show": false,
          // 此处需要加 max和min 属性实现坐标轴时刻居中显示
          "axisLine": {
            "lineStyle": {
              "color": "#ddd"
            }
          },
          "axisLabel": {
            "color": "#666"
          },
          "splitLine": {
            "show": false,
            "lineStyle": {
              "color": "#eee"
            }
          },
          "splitArea": {
            "show": false
          }
        },
        series: [f(0), f(1), f(2), f(3), f(4)]
      }
    const charts = echarts532.init(document.getElementById("map"))
    charts.setOption(option)
  </script>
</body>

</html>